할 일 관리는 주요 속성과 스크립트를 활용하는 기본 예제입니다.

동작 예시

할 일과 완료된 일을 구분합니다. doneDate에 값이 있으면 완료된 일로 처리합니다. 아직 하지 않은 일은 장소와 태그로 분류하며 속성을 바꾸면 알맞은 위치로 자동 이동합니다.

날짜별 노트와도 연동합니다. 예정일인 todoDate와 완료일인 doneDate에 해당하는 날짜 노트 아래에 같은 작업을 복제하고 원본 예제에서는 TODO와 DONE 접두사로 구분합니다.

구현

새 작업을 넣는 노트의 ~child:template 관계가 작업 템플릿을 가리킵니다. 속성 상속을 참고하세요.

속성

템플릿에서 예정일과 완료일 및 태그와 장소를 주요 속성으로 표시합니다. ~runOnAttributeChange는 속성이 바뀔 때 실행할 이벤트 처리기를 연결합니다. 이 스크립트는 완료일을 입력하면 완료 목록으로 옮기고 할 일과 장소 및 태그 목록에서 제거합니다.

새 할 일 버튼

api.addButtonToToolbar({
    title: '새 할 일',
    icon: 'check',
    shortcut: 'alt+n',
    action: async () => {
        // 노트 생성은 백엔드에서 처리합니다.
        const taskNoteId = await api.runOnBackend(async () => {
            const todoRootNote = await api.getNoteWithLabel('taskTodoRoot');
            const {note} = await api.createNote(todoRootNote.noteId, '새 할 일', '');

            return note.noteId;
        });

        // 생성한 노트를 바로 엽니다.
        await api.activateNewNote(taskNoteId);
    }
});

색상

다음 CSS 코드 노트는 할 일을 빨간색으로 표시하고 완료한 일을 초록색으로 표시합니다.

span.fancytree-node.todo .fancytree-title {
    color: red !important;
}

span.fancytree-node.done .fancytree-title {
    color: green !important;
}

이 코드 노트에 #appCss 라벨을 지정하면 시작할 때 적용됩니다. 이벤트 처리기는 상태에 따라 #cssClass 값으로 todo나 done을 지정합니다.